<template>
    <div class="home">
        <div class="foodList">
            <div class="food" v-for="(item, index) in foodList" :key="index" @click="handleFoodItem(item)">
                <div class="imgBox">
                    <img :src="assetsUrl + item.dishesImageUrl" alt="" />
                </div>
                <div class="info">
                    <div class="name">{{ item.dishesName }}</div>
                    <van-rate v-model="item.score" :size="25" color="#ff3e14" void-icon="star" void-color="#eee" />
                    <div class="note">
                        热销第{{ index+1 }} </div>
                            <div class="vote">{{ comment || "服务员态度良好" }}</div>
                            <div class="price">
                                <span class="priceVal">￥{{ item.price }}</span>
                                <span class="min">{{ item.min }}</span>
                                <span class="long">{{ Math.ceil(Math.random(0, 1) * 100) + 20 }}米</span>
                            </div>
                    </div>
                </div>
            </div>
            <!-- <div class="editBar">
                  <div class="homeBar" @click="handlePath('0')">
                      <i class="el-icon-s-home"></i>
                      <div class="text">首页</div>
                  </div>
                  <div class="order" @click="handlePath('1')">
  
                      <i class="el-icon-tickets"></i>
                      <div class="text">订单</div>
                  </div>
                  <div class="my" @click="handlePath('2')">
                      <i class="el-icon-s-custom"></i>
                      <div class="text">我的</div>
                  </div>
              </div> -->
            <van-tabbar v-model="active" @change="onChange">
                <van-tabbar-item icon="home-o">首页</van-tabbar-item>
                <van-tabbar-item icon="search">订单</van-tabbar-item>
                <van-tabbar-item icon="friends-o">我的</van-tabbar-item>
            </van-tabbar>
        </div>
</template>

<script>
import { getHotGoods, getGoodsType, getCategoryList } from "@/api/reception";
export default {
    data() {
        return {
            active: 4,
            assetsUrl: "",
            searchVal: "",
            areaList: [
                {
                    label: "昆明",
                    value: "kunming",
                },
                {
                    label: "曲靖",
                    value: "qujing",
                },
                {
                    label: "玉溪",
                    value: "yuxi",
                },
                {
                    label: "昭通",
                    value: "zhaotong",
                },
                {
                    label: "保山",
                    value: "baoshan",
                },
                {
                    label: "普洱",
                    value: "puer",
                },
                {
                    label: "临沧",
                    value: "临沧",
                },
                {
                    label: "西双版纳",
                    value: "xsbn",
                },
                {
                    label: "大理自治州",
                    value: "dali",
                },
            ],
            recommendList: [],
            itemList: [
                {
                    label: "全部",
                    value: "",
                },
                {
                    label: "超值快餐",
                    value: "超值快餐",
                },
            ],
            foodList: [],
            activeItemVal: "",
        };
    },

    mounted() {
        this.assetsUrl = process.env.VUE_APP_ASSETSURL;

    },
    created() {
        console.log(789);
        
        this.foodList = this.$route.query.foodList
    },
    methods: {
        async getCategoryList() {
            const res = await getCategoryList();
            console.log(res, "a");
            this.itemList = res.data.map((item) => {
                return {
                    label: item,
                    value: item,
                };
            });
            this.itemList.unshift({
                label: "全部",
                value: "",
            });
        },
        async getGoodsTypeList() {
            let data = {
                page: {
                    pageNum: 1,
                    pageSize: 10,
                },
                param: {
                    categoryName: this.activeItemVal,
                },
            };

            const res = await getGoodsType(data);
            this.foodList = res.data.map((item) => {
                return {
                    ...item,
                    score: item.score || "4.5",
                };
            });
            console.log(this.foodList, "datra");
        },
        async getHotGoodList() {
            let data = {
                page: {
                    pageNum: 1,
                    pageSize: 10,
                },
                param: {
                    keyWord: "",
                },
            };
            const res = await getHotGoods(data);
            this.recommendList = res.data;

            console.log(res, "rrrrr");
        },
        handleSeach() { },
        handleItem(item) {
            this.activeItemVal = item.value;
            this.getGoodsTypeList();
        },
        handleFoodItem(item) {
            this.$router.push({
                path: "/orderHome/business",
                query: {
                    dishesId: item.dishesId,
                },
            });
        },
        handleRecommendClick(item) {
            this.$router.push({
                path: "/orderHome/business",
                query: {
                    dishesId: item.dishesId,
                },
            });
        },

        onChange(flag) {
            this.active = flag;
            if (flag == "0") {
                this.$router.push("/orderHome/receptionHome");
            } else if (flag == "1") {
                this.$router.push("/orderHome/orderManage");
            } else if (flag == "2") {
                this.$router.push("/orderHome/myCenter");
            }
        },
    },
};
</script>

<style lang="less" scoped>
.home {
    height: 100%;
    padding: 15px;
    background-color: #f5f5f5;

    .search {
        height: 35px;
        position: relative;
        margin-bottom: 15px;

        input {
            width: 100%;
            height: 100%;
            border: 3px solid #ff3e14;
            border-radius: 15px;
        }

        .searchBtn {
            position: absolute;
            width: 80px;
            height: 35px;
            border-radius: 15px;
            background: linear-gradient(to right, #ff4932, #ff7455);
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            right: 0;
            top: 0;
        }
    }

    .areaCategory {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        background-color: #fff;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

        .area-item {
            width: 70px;
            height: 70px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            .imgBox {
                width: 30px;
                height: 30px;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .name {
                font-size: 12px;
            }
        }
    }

    .recommendArea {
        .title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 40px;

            .text {
                font-weight: 700;
            }

            .more {
                font-size: 12px;
                color: #999;
            }
        }
    }

    .recommendList {
        width: 100%;
        height: 250px;
        overflow-x: auto;
        display: flex;
        margin-top: 15px;

        &::-webkit-scrollbar {
            display: none;
        }

        .recommend-item {
            height: 100%;
            display: flex;
            flex-direction: column;
            margin-right: 15px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            // width: 50%;
            background-color: #fff;
            width: 233px;
            border-radius: 15px;

            .imgBox {
                display: flex;
                justify-content: center;

                img {
                    width: 120px;
                    height: 120px;
                }
            }

            .name {
                font-weight: 600;
                margin-top: 8px;
                margin-bottom: 5px;
            }

            .address {
                font-size: 14px;
                color: #999;
                text-wrap: nowrap;
                text-overflow: ellipsis;
                margin-bottom: 12px;
            }

            .edit {
                .price {
                    color: #ff3e14;
                    font-weight: 600;
                }
            }
        }
    }

    .foodList {
        display: flex;
        flex-direction: column;

        .foodRecommend {
            display: flex;
            margin: 15px 0;
            overflow-x: auto;
            height: 40px;

            .foodRecommendItem {
                width: 80px;
                height: 35px;
                text-align: center;
                line-height: 35px;
                border-radius: 15px;
                border: 1px solid #999;
                color: #999;
                margin-right: 15px;
            }

            .activeItemVal {
                background-color: #ff3e14;
                color: #fff;
                border: none;
            }
        }

        .food {
            display: flex;
            padding: 15px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            margin-bottom: 15px;
            background-color: #fff;

            .imgBox {
                width: 118px;
                height: 118px;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .info {
                flex: 1;
                margin-left: 15px;

                .name {
                    font-weight: 700;
                }

                .note {
                    height: 20px;
                    line-height: 20px;
                    text-align: center;
                    border-radius: 4px;
                    border: 1px solid #ff3e14;
                    color: #ff3e14;
                    font-size: 12px;
                    width: 50%;
                }

                .vote {
                    margin: 5px 0;
                    font-size: 12px;
                    color: #999;
                }

                .price {
                    display: flex;
                    align-items: center;

                    .priceVal {
                        font-weight: 700;
                        color: #ff3e14;
                    }

                    .min {
                        margin-left: auto;
                        margin-right: 8px;
                    }

                    .min,
                    .long {
                        font-size: 12px;
                        color: #999;
                    }
                }
            }
        }
    }

    .editBar {
        position: fixed;
        display: flex;
        bottom: 0;
        width: 100%;
        height: 60px;
        // background-color: red;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;

        .my {
            margin-right: 28px;
        }

        .home .order .my {
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
}
</style>